<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="800"  destroy-on-close @closed="$emit('closed')">
    <el-descriptions :column="2" class="el-descriptions">
      <el-descriptions-item label="操作模块">{{ detail.title }}</el-descriptions-item>
      <el-descriptions-item label="请求地址">{{ detail.operUrl }}</el-descriptions-item>

      <el-descriptions-item label="操作信息">{{ detail.operName }} / {{ detail.operIp }} / {{
          detail.operLocation
        }}
      </el-descriptions-item>
      <el-descriptions-item label="请求方式">{{ detail.requestMethod }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="2" class="el-descriptions">
      <el-descriptions-item label="请求参数"></el-descriptions-item>
    </el-descriptions>
    <div>
      <pre><code class="language-json">{{ detail.operParam ? detail.operParam.trim() : detail.operParam }}</code></pre>
    </div>

    <el-descriptions :column="2" class="el-descriptions">
      <el-descriptions-item label="操作状态">{{ detail.status }}</el-descriptions-item>

      <el-descriptions-item label="操作时间">{{ detail.operTime }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1">
      <el-descriptions-item label="响应数据"></el-descriptions-item>
    </el-descriptions>
    <div>
      <pre><code class="language-json">{{ content }}</code></pre>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import Prism from 'prismjs';
import 'prism-themes/themes/prism-atom-dark.css';
export default {
  dicts:['system_global_status'],
  computed: {
    id() {
      return id
    }
  },
  emits: ['success', 'closed'],
  data() {
    return {
      mode:'show',
      content:'',
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      detail:{},
    }
  },
  methods: {
    //点击节点
    handleNodeClick(data,checked){
      if(checked){
        this.$refs.tree.setCheckedNodes([data])
      }
    },
    //显示
    open(mode='show'){
      this.mode = mode;
      this.visible = true;
      return this
    },
    //表单注入数据
    async setData(id){
      if(id){
        //重新请求
        let res = await this.$API.log.operatelog.detail.get(id)
        this.content = res.data.jsonResult;
        this.$nextTick(()=>{
          Prism.highlightAll()
        })
        // 解构赋值
        this.detail = res.data
      } else{
        this.$alert(res.message, "提示", {type: 'error'})
      }

      //可以和上面一样单个注入，也可以像下面一样直接合并进去

      //Object.assign(this.form, data)
    }
  }
}
</script>

<style>
.el-descriptions .el-descriptions__cell {
  width: 50%;
}
pre {
  padding: 1em !important;
  white-space: pre-wrap;
}
</style>
